
import XxTableModal from "@/ui/xx-tableModal/xx-tableModal";
import { Input } from "antd";
import React, { useEffect, useRef, useState } from "react";
import style from "./style.module.scss";
/**
 * @description XxSelectInput 弹出一个弹窗 在弹窗中双击选择某个数据 后回填数据
 * 👿使用示例：批量送检工具-搜索面板-营业部 搜索框组件  Select.Input框
 */

export function XxSelectInput({
    onChange = Function,
    value = undefined,
    placeholder = "双击选择内容,直接输入无效",
    modalProps = Object,
    listViewProps = Object,
    labelNames = ['supplierName', 'supplierNo'],
    valueNames = "supplierNo",
    ...props
}) {
    const [hide, setHide] = useState(true);
    const [label, setLabel] = useState(undefined);
    const tabRef = useRef();
    const onClick = () => {
        tabRef.current.initModal({
            modalProps: {
                title: "选择营业部",
                ...modalProps,
            },
            listViewProps: {
                menuCode: 'publickBaseSupplierList',//临时测试 ，非正式使用此处code
                upDoubleClick: (record, index) => {

                    setLabel(`${record[labelNames[0]]}-${record[labelNames[1]]}`);  //supplierName-supplierNo
                    onChange(record[valueNames]);
                    tabRef.current.onCancel();
                },
                ...listViewProps,
            }
        })
    };

    useEffect(() => {
        if (value) {
            setHide(false);
        } else {
            setHide(true);
        }
    }, [value])

    return (
        <>
            <div className={style.box} onDoubleClick={() => onClick()}>
                {/* {
                    hide ? null :
                        <div className="ant-input show-box">
                            {label}
                        </div>
                } */}
                {/* {
                    hide ? null :
                        <Input className="ant-input show-box" placeholder={placeholder} value={label} />
                } */}
                <Input className="ant-input show-box" placeholder={placeholder} value={label} />
                <Input
                    value={value}
                    onChange={onChange}
                    placeholder={placeholder}
                    className="input"
                    {...props}
                />
            </div>

            <XxTableModal
                onRef={tabRef}

            />
        </>
    )
}

